<template>
  <div>
    <div style="margin: 10px;">
      <el-button type="primary" @click="handleAddSysConfig">增加系统配置</el-button>
    </div>
    <div style="margin: 10px;">
      <el-table
          :data="tableData"
          border
          style="width: 100%">
          <el-table-column
            prop="info"
            label="配置名称"
            width="220">
          </el-table-column>
          <el-table-column
            prop="varName"
            label="变量名称"
            width="180">
          </el-table-column>
          <el-table-column
            prop="value"
            label="变量值"
            width="450">
          </el-table-column>
          <el-table-column
            prop="createTime"
            label="创建时间">
          </el-table-column>
          <el-table-column label="操作">
                <template slot-scope="scope">
                  <el-button
                    size="mini"
                    type="primary"
                    @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
                  <el-button
                    size="mini"
                    type="danger"
                    @click="handleDelete(scope.$index, scope.row)">删除</el-button>
                </template>
              </el-table-column>
        </el-table>
    </div>
    <div style="margin: 10px;">
      <el-dialog :title="formTitle" :visible.sync="dialogFormVisible">
        <el-form :model="form">
          <el-form-item label="配置名称" :label-width="formLabelWidth">
            <el-input v-model="form.info" autocomplete="off" disabled></el-input>
          </el-form-item>
          <el-form-item label="变量名称" :label-width="formLabelWidth">
            <el-input v-model="form.varName" autocomplete="off" disabled></el-input>
          </el-form-item>
          <el-form-item v-if="form.type=='string'" label="变量值" :label-width="formLabelWidth">
            <el-input v-model="form.value" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item v-if="form.type=='text'" label="变量值" :label-width="formLabelWidth">
            <el-input
              v-model="form.value"
              type="textarea"
              :autosize="{ minRows: 2, maxRows: 4}"
              placeholder="请输入内容"
              >
            </el-input>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="dialogFormVisible = false">取 消</el-button>
          <el-button type="primary" @click="submitSaveConfig">保 存</el-button>
        </div>
      </el-dialog>
    </div>
  </div>
</template>

<script>
  import {getSysConfigAll,setSysConfigById} from '@/api/sysconfig.js'

  export default {
    name: 'SiteConfig',
    data() {
      return {
        groupId: 1,
        tableData: [],
        dialogFormVisible: false,
        formLabelWidth: '120px',
        formTitle: '',
        form: {
          configId: null,
          info: null,
          varName: null,
          value: null,
          type: 'string',
          groupId: 1,
        },
      }
    },
    mounted() {
      this.loadList()
    },
    methods: {
      loadList() {
        let param = {id: this.groupId}
        getSysConfigAll(param).then(res => {
          console.log('getSysConfigAll', res)
          if(res.code == 200) {
            this.tableData = res.data
          }
          else {
            let msg = res.msg
            this.$message.error("msg")
          }
        })
      },
      resetForm() {
        this.form.configId = null
        this.form.info = null
        this.form.varName = null
        this.form.value = null
        this.form.type = 'string'
        this.form.groupId = 1
      },
      handleAddSysConfig() {
        console.log('addSysConfig');
      },
      // 保存设置
      saveConfigForm() {
        console.log('saveConfigForm', this.configForm);
        this.$refs.configForm.validate((valid) => {
          if (valid) {
            alert('submit!');
          } else {
            console.log('error submit!!');
            return false;
          }
        });
      },
      handleEdit(index, row) {
        console.log('handleEdit', row)
        this.formTitle = '修改配置'
        this.form = row
        this.dialogFormVisible = true
      },
      handleDelete(index, row) {
        console.log('handleDelete', row)
      },
      submitSaveConfig() {
        if(this.form.configId == null) {
          // 添加
          console.log('add', this.form);
        }
        else {
          // 修改
          console.log('submitSaveConfig:edit', this.form);
          setSysConfigById(this.form).then(res => {
            if(res.code == 200) {
              this.$message.success("修改成功")
              this.dialogFormVisible = false
              this.loadList()
            }
            else {
              let msg = res.msg
              this.$message.error(msg)
            }
          })
        }
      }
    }
  }
</script>

<style>
</style>
